<template>
  <div>
    <div class="tabs">
      <a v-for="(item) in $list"
        :key="item.value"
        @click="change(item)"
        :class="{active: componentsName === item.value}">
        {{item.name}}
      </a>
    </div>
    <div>
      <component :is="componentsName"/>
    </div>
  </div>
</template>

<script>
import DemoEvent from './demo-event.vue'
import DemoEventListener from './demo-event-listener.vue'
import DemoEventRefresh from './demo-event-refresh.vue'
import DemoZindex from './demo-zindex.vue'

const list = [
  {
    name: '点击事件',
    value: 'DemoEvent',
  },
  {
    name: '事件代理',
    value: 'DemoEventListener',
  },
  {
    name: '分层绘制',
    value: 'DemoZindex',
  },
  {
    name: '交互重绘',
    value: 'DemoEventRefresh',
  },
]
export default {
  components: {
    DemoEvent,
    DemoEventListener,
    DemoEventRefresh,
    DemoZindex
  },
  data () {
    this.$list = list
    return {
      componentsName: list[0].value
    }
  },
  methods: {
    change (componentsName) {
      this.componentsName = componentsName.value
    }
  }
}
</script>

<style scoped>
a {
  color: #2f2cd6;
  font-size: 14px;
  margin-right: 8px;
  cursor: pointer;
}
a.active {
  color: #999;
}
</style>